<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0;">

    <title></title>
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border:1px solid #000000;display: block; margin: 50px auto;">
    不支持canvas
</canvas>

<script>
    window.onload = function () {
        console.log("windows onload")
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        context.moveTo(100, 100);
        context.lineTo(700, 700);
        context.stroke();
        console.log("context" + context)

        context.lineWidth = 5
        context.lineTo(100, 700);
        context.lineTo(100, 100);
        //context.fillStyle="rgb(12,12,12)"     ;
        context.fillText("凯兵", 150.150, 500);
        //  context.fill();
        context.strokeStyle = "red";
        context.stroke();
        context.beginPath();
        context.moveTo(200, 100);
        context.lineTo(800, 700);
        context.closePath();
        context.strokeStyle = "green"
        context.stroke();

        context.beginPath();
        context.arc(500, 400, 100, 0, 2 * Math.PI, false);

        context.strokeStyle = "rgb(122,198,133)";
        context.stroke();

        context.beginPath();
        context.arc(600, 400, 100, 0, 1.5 * Math.PI);

        context.strokeStyle = "rgb(122,198,133)";
        context.stroke();
        context.fill();

    }
</script>
</body>
</html>